import React from 'react'
import { useState,useEffect } from "react"
import { SearchPanel } from './search-panel'
import { List } from './list'
import * as qs from 'qs'
import {cleanObject,useMount,useDebounce} from './../../utils'

const apiUrl = process.env.REACT_APP_APP_URL
export const ProjectListScreen =() =>{
  const [param,setParam] = useState({
    name:'',
    personId:''
  })
  const [list, setList] = useState([])
  const [users, setUsers] = useState([])
  const debouncedParam = useDebounce(param,200)
  useEffect(()=>{
    fetch(`${apiUrl}/projects?${qs.stringify(cleanObject(debouncedParam))}`).then(async response =>{
      if (response.ok) {
        console.log(response)
        setList(await response.json())
      }
    })
  },[debouncedParam])
  useMount(()=>{
    fetch(`${apiUrl}/users`).then(async response =>{
      console.log(response)
      if(response.ok) {
        setUsers(await response.json())
      }
    })
  })
  return <div>
    <SearchPanel users={users} param={param} setParam={setParam}/>
    <List users={users} list={list}/>
  </div>
}